<template>
	<view class="page pos-rel" v-if="info">
		<view class="top over-hide "></view>
		<view class="content over-hide pos-abs">
			<view class="container">
				<view class="bac-color-fff info mar-t-20" v-if="info.userType==2">
					<view class="flex align-center">
						<view class="tag"></view>
						<view class="font-size-22 mar-l-10 font-bold flex-1">儿童情况</view>
						 <!-- && (info.status != 0 && info.status != 3) status 0 关系接触 3 帮扶已结束-->
						<view class="font-color-fff unlink font-size-13" @click="doCancelHelp" v-if="(info.status != 0 && info.status != 3)">解除关系</view>
					</view>
					<view class="info-content">
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">姓名</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.apply.child_usernme }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">出生日期</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ transformTime(info.apply.birthday) }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">身体状况</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.apply.health }}</view>
						</view>
						<transition name="fade">
							<view v-if="show">
								<view class="mar-t-10 flex font-color-888 align-center">
									<view class="title font-size-15">身份证号</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.apply.card_num }}</view>
								</view>
								<view class="mar-t-10 flex font-color-888 align-center">
									<view class="title font-size-15">就读学校</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.apply.school }}</view>
								</view>
								<block v-if="info.apply.guardianship">
									<view v-for="(item, index) in info.apply.guardianship" :key="index">
										<view class="mar-t-10 flex font-color-888 align-center" v-if="item.name">
											<view class="title font-size-15">监护人{{ index + 1 }}名称</view>
											<view>：</view>
											<view class="flex-1 mar-l-10 font-size-16">{{ item.name }}</view>
										</view>
										<view class="mar-t-10 flex font-color-888 align-center" v-if="item.relase">
											<view class="title font-size-15">监护人{{ index + 1 }}关系</view>
											<view>：</view>
											<view class="flex-1 mar-l-10 font-size-16">{{ item.relase }}</view>
										</view>
										<view class="mar-t-10 flex font-color-888 align-center" v-if="item.mobile">
											<view class="title font-size-15">联系方式</view>
											<view>：</view>
											<view class="flex-1 mar-l-10 font-size-16">{{ item.mobile }}</view>
										</view>
										<view class="mar-t-10 flex font-color-888 align-center" v-if="item.job">
											<view class="title font-size-15">职业</view>
											<view>：</view>
											<view class="flex-1 mar-l-10 font-size-16">{{ item.job }}</view>
										</view>
										<view class="mar-t-10 flex font-color-888 align-center" v-if="item.address">
											<view class="title font-size-15">现居地址</view>
											<view>：</view>
											<view class="flex-1 mar-l-10 font-size-16">{{ item.address }}</view>
										</view>
									</view>
								</block>
								<view class="mar-t-10 flex font-color-888 align-center">
									<view class="title font-size-15">家庭住址</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.apply.home_address }}</view>
								</view>

								<view class="mar-t-10 flex font-color-888 align-center">
									<view class="title font-size-15">申请理由</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.apply.remark }}</view>
								</view>
							</view>
						</transition>
						<view class="font-color-bf text-center font-size-14 pad-b-10 mar-t-20 flex align-center justify-center" @click="show = !show">
							<text v-show="!show">展开</text>
							<text v-show="show">返回</text>
							<image src="@/static/icons/down.png" style="width:25px;height:25px" />
						</view>
					</view>
				</view>
				<view class="bac-color-fff info mar-t-20" v-else>
					<view class="flex align-center">
						<view class="tag"></view>
						<view class="font-size-22 mar-l-10 font-bold flex-1">志愿者资料</view>
						<view class="font-color-fff unlink font-size-13" @click="doCancelHelp" v-if="(info.status != 0 && info.status != 3)">解除关系</view>
					</view>
					<view class="info-content">
						<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.apply_username">
							<view class="title font-size-15">姓名</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.apply_username }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.sex_name">
							<view class="title font-size-15">性别</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{info.pubapply.sex_name}}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.mobile">
							<view class="title font-size-15">联系电话</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.mobile }}</view>
						</view>
						<transition name="fade">
							<view v-if="show">
								<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.card_num">
									<view class="title font-size-15">身份证号</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.card_num }}</view>
								</view>
								<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.education">
									<view class="title font-size-15">学历</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.education }}</view>
								</view>
								<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.remark">
									<view class="title font-size-15">备注</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.remark }}</view>
								</view>
							</view>
						</transition>
						<view class="font-color-bf text-center font-size-14 mar-t-20 flex align-center justify-center" @click="show = !show">
							<text v-show="!show">展开</text>
							<text v-show="show">返回</text>
							<image src="@/static/icons/down.png" style="width:25px;height:25px" />
						</view>
					</view>
				</view>
				<view class="bac-color-fff info mar-t-20">
					<view class="flex align-center">
						<view class="tag"></view>
						<view class="font-size-22 mar-l-10 font-bold flex-1">帮扶记录</view>
						<navigator :url="'/pages/social/helpadd?id=' + info.id" v-if="info.userType == 2 && (info.status != 0 && info.status != 3)">
							<view class="play-day-card font-size-12 over-hide">打卡+</view>
						</navigator>
					</view>
					<view class="day-card">
						<view v-for="(item, index) in list" :key="index" class="border-b-1 pad-b-20">
							<view class=" flex mar-t-20  pad-b-20">
								<view class="font-color-666 font-size-16">{{ index + 1 }}、</view>
								<view class="flex-1">
									<view class="font-color-666 font-size-16">{{ item.help_info }}</view>
									<view class="flex mar-t-10" v-if="item.help_images">
										<image
											:src="url"
											mode=""
											class="mar-r-10 day-card-image"
											v-for="(url, i) in item.help_images"
											:key="i"
											@click="prviewImage(item.help_images, i)"
										/>
									</view>
									<view class="font-color-888 font-size-13 mar-t-10">打卡时间：{{ item.create_time_text }}</view>
									<view class="font-color-888 font-size-13 mar-t-10 flex align-center" v-if="item.help_address">
										打卡地址：{{ item.help_address }}
									</view>
								</view>
							</view>
							<view class="text-right" v-if="item.evaluate_status == 0 && info.userType == 1">
								<navigator :url="'/pages/social/evaluate?order_no=' + item.order_no" class=" pinjia-btn mar-l-10 font-size-12 dis-inline-block">
									立即评价
								</navigator>
							</view>
							<view v-else>
								<navigator
									:url="'/pages/social/evaluate_detail?id=' + item.social_help_id + '&order_no=' + item.order_no"
									class="font-color-888 font-size-14 text-center"
								>
									查看更多
								</navigator>
							</view>
							<!-- <view class=" mar-l-30 bac-color-f4 mar-t-10 pj-card">
                                 <view class="flex align-center">
                                    <view class="avatar"></view>
                                    <view class="font-size-15 mar-l-10 font-color-A7AABB">张向:</view>
                                 </view>
                                <view class="font-color-888 mar-t-5">
                                    <view>综合得分:</view>
                                </view>
                            </view> -->
							<!-- <navigator :url="'/pages/social/evaluate'" class="help-lag flex  align-center bac-color-fff mar-t-10" v-if="info.status == 2">
                                <view class="tag-lag">

                                </view>
                                <view class="flex-1 mar-l-5 font-bold">
                                    帮扶评价
                                </view>
                                <view class="font-size-13 font-color-888">
                                    未评价
                                </view>
                            </navigator> -->
						</view>
						<view class="pad-b-10 font-size-16 font-color-999" v-if="!list.length">
							暂无帮扶记录
						</view>
					</view>
				</view>
				<!-- <navigator :url="'/pages/social/evaluate'" class="help-lag flex  align-center bac-color-fff mar-t-10" v-if="info.status == 2">
                    <view class="tag-lag">

                    </view>
                    <view class="flex-1 mar-l-5 font-bold">
                        帮扶评价
                    </view>
                    <view class="font-size-13 font-color-888">
                        未评价
                    </view>
                </navigator> -->
				<view class="font-color-fff  confirm-btn " v-if="info.is_volunteer && (info.status != 0 && info.status != 3)" @click="doCompleteHelp"><text>完结帮扶</text></view>
				<view style="height:40px"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { myHelpdetail, helpLog, completeHelp, cancelHelp } from '@/utils/http';

export default {
	data() {
		return {
			show: false,
			id: '',
			info: '',
			index_page: 0,
			total_page: 1,
			list: []
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.myHelpdetail();
		this.helpLog();
		this.bus.$on('refreshHelpLog',()=>{
			console.log('bus.on refreshHelpLog')
			this.index_page = 0
			this.list = []
			this.helpLog();
		})
	},
	methods: {
		slidedown() {
			// 同时右平移到 100px,旋转 360 读
			this.$refs.ani.step({
				translateX: '100px',
				rotate: '360'
			});
			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
			this.$refs.ani.step(
				{
					translateX: '0px',
					rotate: '0'
				},
				{
					timingFunction: 'ease-in',
					duration: 200
				}
			);
			// 开始执行动画
			this.$refs.ani.run(() => {
				console.log('动画支持完毕');
			});
		},
		myHelpdetail() {
			myHelpdetail({ id: this.id }).then(res => {
				console.log(res);
				this.info = res;
			});
		},
		helpLog() {
			helpLog({ page: this.index_page + 1, id: this.id }).then(res => {
				if (res) {
					let list = res.data
					// list.map(item=>{
					// 	item.help_images = item.help_images
					// 	return item
					// })
					this.list = [...this.list, ...list];
					this.index_page = res.current_page;
					this.total_page = res.last_page;
				}
			});
		},
		prviewImage(urls, index) {
			uni.previewImage({
				urls: urls,
				current: index
			});
		},
		//完成帮扶
		doCompleteHelp() {
			let _that = this;
			uni.showModal({
				title: '提示',
				content: '是否确认完结帮扶',
				success: function(res) {
					if (res.confirm) {
						completeHelp({ id: _that.id }).then(res => {
							if (res) {
								uni.showToast({
									title: '完成帮扶',
									duration: 2000
								});
								_that.myHelpdetail();
							}
						});
					}
				}
			});
		},
		//解除帮扶
		doCancelHelp() {
			let _that = this;
			uni.showModal({
				title: '提示',
				content: '是否确认解除',
				success: function(res) {
					if (res.confirm) {
						cancelHelp({ id: _that.id }).then(res => {
							if (res) {
								uni.showToast({
									title: '解除成功',
									duration: 2000
								});
								_that.myHelpdetail();
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped>
page {
	background-color: #f4f5fa !important;
}
.top {
	top: 0;
	width: 100%;
	height: 200px;
	background-image: linear-gradient(to right, #65c7f7, #65c7f7);
	border-bottom-left-radius: 80px;
	border-bottom-right-radius: 80px;
}
.content {
	top: 10px;
	width: 100%;
	height: 100%;
}
.content .info {
	border-radius: 8px;
	padding: 20rpx 20rpx 0 20rpx;
	box-shadow: 2px 2px 5px #e7e5e5d3;
}
.content .info .tag {
	width: 5px;
	height: 20px;
	background-color: #ff5c00;
	border-radius: 8px;
}
.content .info .unlink {
	background-color: #00ce9e;
	padding: 5px 10px;
	border-radius: 8px;
}
.info-content {
	padding: 5px 10px;
}
.info-content .title {
	min-width: 90px;
	text-align: justify;
	text-align-last: justify;
}
.day-card .day-card-image {
	height: 80px;
	width: 80px;
	background-color: #ccc;
}
.play-day-card {
	height: 50px;
	line-height: 50px;
	width: 50px;
	text-align: center;
	color: #fff;
	background-color: #0088ff;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 3px rgb(230, 227, 227);
}

.help-lag {
	padding: 10px 15px;
	border-radius: 5px;
}
.tag-lag {
	background-color: #0088ff;
	width: 4px;
	height: 20px;
	border-radius: 5px;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
}
.pinjia-btn {
	background-color: #f2af3c;
	color: #fff;
	padding: 12rpx 20rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
}
.pj-card {
	padding: 8px 12px;
	border-radius: 8px;
}
.pj-card .avatar {
	height: 30px;
	width: 30px;
	background: #fff;
	border-radius: 50%;
}
</style>
